<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../Vue全家桶_stu/03_依赖包/vue.js"></script>
</head>

<body>
    <div id="root">
        <p>请输入搜索内容 <input type="text" placeholder="输入内容" v-model="keyword"></p>
        <ul>
            <li v-for="item in resultList" :key="item.sa">
                <a :href="`https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1&rsv_idx=1&tn=baidu&wd=${item.q}&fenlei=256&rsv_pq=ceb689730001c3a0&rsv_t=d17cm6TqkHTDKhv4FrLAdk4ZV%2FnI2Zqte%2Fc8q7sxA6mQ9RwXotOia%2BbPLyNP&rqlang=en&rsv_enter=1&rsv_dl=tb&rsv_sug3=10&rsv_sug1=7&rsv_sug7=101&rsv_sug2=0&rsv_btype=i&prefixsug=%25E6%25AC%25B8%25E5%2598%25BF%25E5%2598%25BF&rsp=5&inputT=1735&rsv_sug4=2482`" target="_blank" rel="noopener noreferrer">{{item.q}}</a>
            </li>
        </ul>
    </div>
    <script>
        const vm = new Vue({
            el: '#root',
            data: {
                keyword: '',
                resultList: [],
                href:''
            },
            //当keyword变化时向服务器发送请求
            watch: {
                keyword() {
                    //创建函数
                    fun = function (data) {
                        //data为服务器调用函数时传递的参数
                        //    这个函数内部的this为window
                        console.log(this)
                        vm.resultList = data.g
                    }
                    //创建script
                    const script = document.createElement('script')
                    script.src = `https://www.baidu.com/sugrec?pre=1&p=3&ie=utf-8&json=1&prod=pc&from=pc_web&sugsid=36545,36673,36454,36453,36692,36165,36693,36698,36569,26350,36469&wd=${this.keyword}&req=2&csor=1&cb=fun&_=1656124416430`
                    document.body.appendChild(script)
                    //执行完之后删除script标签
                    document.body.removeChild(script)
                }
            }
        })
    </script>
</body>

</html>